﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>任务列表</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .classFinished label {
            color: #ddd;
            text-decoration: line-through;
        }

        #app {
            width: 650px;
            border: 1px solid #ddd;
            margin: 30px auto;
            padding: 20px;
        }

        .inputModel {
            width: 576px;
            height: 35px;
            line-height: 35px;
            padding-left: 20px;
            font-size: 16px;
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            border: 1px solid #aaa;
        }

        .list {
            padding: 0;
            margin: 30px 0 0;
            border: 1px solid #ddd;
        }

            .list > li {
                list-style: none;
                border-bottom: 1px solid #ddd;
                padding: 0 70px 0 50px;
                position: relative;
            }

            .list li label {
                font-size: 22px;
                display: block;
                padding: 15px 0px;
                line-height: 1.5;
            }

        .btnDel {
            position: absolute;
            right: 10px;
            top: 20px;
            border: 1px solid #eee;
            border-radius: 3px;
            padding: 5px 10px;
            font-size: 12px;
            display: none;
        }

        .list li:hover .btnDel {
            display: block;
        }

        .toggle {
            position: absolute;
            left: 15px;
            top: 25px;
        }

        .edit input[type=text] {
            width: 100%;
            border: 1px solid #999;
            box-sizing: border-box;
            padding: 15px 10px;
            font-size: 22px;
        }

        .edit {
            display: none;
        }

        .classEdit .view {
            display: none;
        }

        .classEdit .edit {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <fieldset>
            <legend>添加</legend>
            menuid
            <input type="text" v-model="newMenu.menuid" placeholder="menuid" class="inputModel"><br />
            parentid
            <input type="text" v-model="newMenu.parentid" placeholder="parentid" class="inputModel"><br />
            menutype
            <input type="text" v-model="newMenu.menutype" placeholder="menutype" class="inputModel"><br />
            menuname
            <input type="text" v-model="newMenu.menuname" placeholder="menuname" class="inputModel"><br />
            orderid
            <input type="text" v-model="newMenu.orderid" placeholder="orderid" class="inputModel"><br />
            <button v-on:click="addNew">提交</button>
        </fieldset>
        <div>
            {{newMenu|json}}
        </div>

        <h2>菜单列表</h2>
        
        <ul class="list">
            <li v-for="item in menulist | orderBy 'orderid' -1 " v-if="item.parentid=='0'">
          
                <label v-on:dblclick="editTodo(item)">
                    +{{item.menuname+"=="+item.menuid }}
                </label>
              
                <ul v-for="subitem in menulist | filterBy item.menuid in 'parentid' " v-if="subitem.parentid==item.menuid" >
                    <li>
                        <label v-on:dblclick="editTodo(subitem)">
                            --{{subitem.menuname }}
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
        <h2>菜单列表--自定义过滤器</h2>
        <ul class="list">
            <li v-for="item in menulist | SUBMENU 0">

                <label v-on:dblclick="editTodo(item)">
                    +{{item.menuname+"=="+item.menuid }}
                </label>

                <ul v-for="subitem in menulist | SUBMENU item.menuid">
                    <li>
                        <label v-on:dblclick="editTodo(subitem)">
                            --{{subitem.menuname }}
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
        <br />
        <a>添加第一级菜单</a>
        <br /><br />
        <fieldset>
            <legend>修改</legend>
            menuid
            <input type="text" v-model="editedMenu.menuid" placeholder="menuid" class="inputModel"><br />
            parentid
            <input type="text" v-model="editedMenu.parentid" placeholder="parentid" class="inputModel"><br />
            menutype

            <select v-model="editedMenu.menutype" >
                <option>请选择</option>
                <option value="list">list</option>
                <option value="article">article</option>
                <option value="parentmenu">parentmenu</option>
            </select>
            <span>Selected: {{ editedMenu.menutype }}</span>
            <br />

            menuname
            <input type="text" v-model="editedMenu.menuname" placeholder="menuname" class="inputModel"><br />
            orderid
            <input type="text" v-model="editedMenu.orderid" placeholder="orderid" class="inputModel"><br />
            <button v-on:click="addNew">提交</button>
        </fieldset>
    </div>
    <script src="@Url.Content("~/Scripts/vue.js")"></script>
    <script src="@Url.Content("~/Scripts/vue-resource.min.js")"></script>

    <script>

        var filters = {
            all: function (todos) {
                return todos;
            },
            active: function (todos) {
                return todos.filter(function (todo) {
                    return !todo.finished;
                });
            },
            completed: function (todos) {
                return todos.filter(function (todo) {
                    return todo.finished;
                });
            }
        };

        Vue.filter('SUBMENU', function (array, pid) {
            return array.filter(function (item) {
                return item.parentid==pid;
            });
        })

        var vm = new Vue({
            el: '#app',
            data: {
                menulist: [
                    { "menuid": "1", "parentid": "0", "menutype": "parentmenu", "menuname": "区域", "orderid": 11 },
                    { "menuid": "2", "parentid": "0", "menutype": "parentmenu", "menuname": "行业类别", "orderid": 2 },
                    { "menuid": "3", "parentid": "0", "menutype": "parentmenu", "menuname": "日历", "orderid": 3 },
                    { "menuid": "4", "parentid": "1", "menutype": "list", "menuname": "亚洲0", "orderid": 1 },
                    { "menuid": "5", "parentid": "1", "menutype": "list", "menuname": "欧洲", "orderid": 2 },
                    { "menuid": "6", "parentid": "1", "menutype": "list", "menuname": "美洲", "orderid": 3 },
                    { "menuid": "7", "parentid": "1", "menutype": "list", "menuname": "澳洲", "orderid": 3 },
                    { "menuid": "8", "parentid": "11", "menutype": "list", "menuname": "父菜单id是11", "orderid": 3 }
                ],
                newMenu: {},
                editedMenu: {},
                visibility: 'all'
            },
            init: function () {
                console.log('init ');
            },
            computed: {
                filteredTodos: function () {
                    return filters[this.visibility](this.menulist);
                }
            },
            methods: {
                changeState: function (param) {
                    param.finished = !param.finished;
                },
                addNew: function () {
                    this.menulist.unshift(this.newMenu);
                    this.newMenu = {};
                },
                editTodo: function (param) {
                    this.beforeEditCache = param;
                    this.editedMenu = param;
                },
                editItem: function (param) {
                    if (!this.editedTodo)
                        return;
                    if (!param.menuname) {
                        this.todolist.$remove(param);
                    }
                    this.editedMenu = null;
                },
                cancelEdit: function (param) {
                    param = this.beforeEditCache;
                    this.editedMenu = null;
                },
                delItem: function (param) {
                    if (confirm("确认删除吗？")) {
                        this.todolist.$remove(param);
                    }
                },
                delCompletedItem: function () {
                    if (confirm("确认删除所有已完成任务吗？")) {
                        this.todolist = filters.active(this.todolist);
                    }
                }
            }
        })

    </script>

</body>

</html>
